Visité el blog de Markos, y me gustó esa modificación que comentaba. Se trataba de la imagen que aparece en la cabecera de los comentarios que dicho sea de paso yo copié de la plantilla Red White Template
Tenía pendiente crear una entrada explicando como añadir una imagen en la cabecera pero al ver la imagen de Markos una lucecita se encendió en mi cabeza. Pensé que sería una buena idea crear varias imágenes para añadir a los comentarios.
¿Quién podía crear esas imágenes?
!Pues Markos que domina a la perfección el Photoshop¡
Su respuesta no se hizo esperar, las imágenes son geniales:
En conversación con Markos decidimos (mejor dicho, decido) que será Markos quien creará esa entrada y de paso dar a conocer sus imágenes.
Los pasos a seguir son muy sencillos, nos situamos en plantilla Edición de HTML sin necesidad de expandir la plantilla y buscamos:
.comment-author {
A continuación añadimos:
background:transparent url(aquí-URL-de-la-imagen) top no-repeat;
Si ya lo tenemos porque en su día añadimos color en los comentarios lo que haremos será sustituir el color por la url de la imagen.
Nos quedaría algo así:
.comment-author {
background:transparent url(url_de_la_imagen) top no-repeat;
margin:.5em 0 0;
padding:13px 10px 20px 110px;
font-weight:bold;
text-align: center;
color:#000000;
}
Si lo deseamos también podemos darle color los comentarios.
Genial. Como siempre. Nos dejas anonadados a todos ;).
Un saludo!
Otra cosa, le he comentado a Rosa en un comentario que he estado probando y jugando con lo de Wordpress... y no me convence.
He leído mucho y me he puesto en materia, y mis conclusiones han sido... o estás dispuesto a pagar por algún host de garantías o mejor quedarse en Blogger, porque los host gratuítos con MYSQL o son una basurilla o te inundan de banners de publicidad el blog (lo he vivido en mis carnes).
La pela es la pela.
Así que para acabar con las penas... estreno blog!! (lo digo aquí también que seguro que me llevo alguna visita de regalo) xD.
http://elblogdejabba.blogspot.com/
Otro saludete Hutt.
Gema.
Explicalo tu!! x q :D no entiendo nada
Hola gem@ , gracias de nuevo (espero no ser pesado) , pero nadie me había tratado tan bien :DD
Hasta la próxima
La última cosa , sabes de algún sitio para conseguir un formulario para blogger?
Gracias ,
Markos
Muy bueno, se ve lindo, pero me no lo he probado. Hay tanto recurso acá, que me siento como en un restorán en que mejor hago una degustación de pocos platos y pequeños, porque si comiera todo lo que me gusta ¡me enfermo! :(
Un beso
El otro dia te deje un comentario en el post del Template Red White Web peor no lo debiste de ver. te lo vuelvo a dejar aqui a ver si me sabrias decir:
"Yo uso este template hace algunos dias, y la unico q no consigo poner son los marcadores sociales en cada post.
¿ Sabrias como hacerlo ?
Yo segui estos pasos:
http://blogandweb.com/2007/05/14/redes-sociales-social-bookmarking-en-blogger/
Pero parece que con esta plantilla no funcionan...
A ver si me dices algo.
Saludos y enhorabuena por tu blog ;D
Hola gem@ ahora mismo no estoy trabajando mucho en el blog pero pero todo lo que sea Photoshop...
Bueno aqui va la pregunta : ¿de que tamaño son las imagenes en pixels? bueno gracias adelantadas adios
Pablo
Hola Gema!
muy buen truco :)
me gustaria que leyeras este post:
http://byx-todojuvenil.blogspot.com/2007/10/primer-premio-que-creo-lo-llamo-premio.html
ojala te guste mucho :)
chau!
Jabba me alegra que te guste la idea ya he visto tu blog y !!está genial¡¡
Te felicito porque además la temática es muy variada.
Fernando si te fijas en la entrada hay un enlace donde dice que es imprescindible añadir primero el hack de "Entradas en expandible para las categorías" una vez tengas añadido el código de entradas en expandible debes seguir paso a paso las indicaciones de Markos.
Hola Markos no debes darme las gracias el trabajo lo hiciste tu ;)
¿Te refieres a un formulario para email?
Hola Alemamá :) :)
Es lógico que nos guste todo, pero tampoco es recomendable aplicarlo todo para no recargar el blog.
De todas formas si decides añadir algo y te surgen dudas házmelo saber :)
Hola JoseCa tengo mucha tarea atrasada respecto a contestar comentarios y email, espero este fin de semana
poder tener todo el orden.
Respecto a la plantilla Red White está resultando un poco problemática modificarla, tengo intención de actualizar esa entrada explicando como modificarla porque son varios los que me lo han pedido ayuda. (intentaré también lo de las redes sociales)
Pablinho666™ las imágenes son de 497px de ancho por 88px de alto. :)
Gracias Sofia eres un encanto :)
Gema
Hace semans q puse:
Entradas en expandible para las categorías
Hola Gema, hice lo que me recomendaste verifique las medidas del #main-wrapper(465px), #sidebar1(200px), sidebar2(200px) y tambien #outer-wrapper, esto yo no lo modifique esta tal cual venia en la plantilla original, pero igual me fije lo que me decias, pero me encontre con que en #outer-wrapper, mi plantilla no tiene una medida como las otras si no que esta en blanco.
Lo de las entradas no lo puedo ver no se si sera por mi monitor estoy usando una resolucion 1440x900, en un monitor de 19 pulgadas widescreen, tal vez al ser mas ancho que de costubre no me deja ver esos problemas, yo habia puesto un mensaje en el blog que si habia problemas con la visualizacion que me avisaran pero pasaron muchos dias y nadie dijo nada entonces lo borre.
No se que puedo hacer, espero que me puedas ayudar.
Saludos y gracias!
Muchas gracias Gema.. Estare atento ;)
.-GEMA:No he podido contactar contigo por otro medio; pero me veo obligado a pedirte algo en relación a mi blog.
.-El espacio entre líneas del texto de mi blog es muy escaso y me gustaría darle algo más de holgura. ¿qué tengo que hacer?
.-GRACIAS ANTICIPADAS.
.-Saludos, Mi Perfil.
Fernando algo no va bien, porque he visto que lo tienes aplicado pero no se expande la entrada completa :)
Mundo Show que existe un problema no hay duda, prueba con las imágenes que subiste a las entradas.
No me has dicho si la plantilla está con esos problemas desde que la descargaste o ha sido a partir de algún cambio.
Andybel mira en Configuración/Formato y marca la casilla "Convertir saltos de línea"
JoseCa ya está actualizado ;)
Ya fui a Formato y la casilla q mencionas esta activada
¿Te refieres a lo que me comentabas de la separación entre líneas?
He visto tu blog y la separación me parece la correcta ¿no será tu navegador ?
uso Firefox!!
No uso ni x equivocacion internet explorer
Fernando, el entrelineado tiene el espacio que viene por defecto.
Si deseas más espacio debes hacerlo pulsando la tecla Intro.
(No sé de otra forma)
cual es la tecla intro? sera la q dice Enter?
Esa misma ;)
se te agradece mucho la ayuda q brindas por medio de tu Blog en especial la gente q como yo estamos comenzado muchas gracias ^^
Bienvenida Veronika, agradezco tu comentario, ya sabes donde encontrarme si necesitas ayuda ;)
Hola Gema tengo un problema
No sé porqué,pero las cabeceras de mis comentarios (donde dice: Carla comenta:",por ejm.) no tienen color,sólo tienen el color del fondo de mi blog,son transparentes. Hice el truco de poner color a los comentarios pero cada vez que cambio de color a comment author, no se cambia nada,sigue transparente. Ahora quise aplicar la url de la imagen para ponerla pero sigue igual.
¿qué puedo hacer?
Comprueba la url de la imagen pegándola en el navegador, si la imagen aparece entonces el error está en el código mal añadido.
No puedo acceder a tu blog y ver lo que me comentas para ser más precisa :(
No se me ha presentado el problema precisamente por intentar agrgar este truco.Es un problema que lo tengo desde antes, cuando hice que mis comentarios tuvieran color.
Puse que el comment author sea de color blanco,pero sigue teniendo el color de fondo de mi blog.
¿Qué puedo hacer para que,aunque sea,sólo tenga color?
Necesito saber lo que agregaste a ese código anónimo, o al menos tu blog para saber como queda.
Puede que le añadieras transparencia pero no puedo saberlo sin verlo.
Bien te envié un mensaje a tu correo donde está la parte del código que está en mi blog.
Espero que puedas ayudarme.Por cierto,mi nombre es Alicia.
Ya he visto el email Alicia cuando tenga algo te lo hago saber ;)
No es que quiera precionarte Gema,pero quisiera saber si ya viste cuál es la falla.
Besos.
Alicia.
Te he mandado un email Alicia ;)
Hallo !
Yo tengo un problemilla ..
segui todos los pasos y puse la imagen en un blog de prueba que tengo , y salio todo bien .
Luego lo volvi a hacer en mi otro blog , pero no sale . Quizá sea porque tengo otra plantilla =S no ?
Ayudaa T.T
Bueno , tu blog está genial y me ha ayudado en muchas cosas , gracias por todo !
Küss
tØkiita es recomendable que el blog de pruebas tenga la misma plantilla que estamos usando, de lo contrario la prueba nos servirá de poco.
Dime que plantilla estás usando o déjame el enlace a tu blog porque en el perfil he visto que tienes tres ;)
Hola, estoy iniciándome en esto de los blogs y simplemente quería comentarte que tus explicaciones son geniales y me están ayudando mucho, por supuesto voy a añadir un link de tu blog aunque no sea gran cosa, espero que sirva para ayudar a otros como yo. Muchas Gracias. Humberto.
A mi no me sale esto :(
Lo que hago es esto...
Mi codigo seria este:
.comment-author {
background-color:!important;
margin:0;
color:#000000;
float:left;
font-size:0.6875em;
line-height:17px !important;
width:465px;
}
y lo pongo así:
.comment-author {
background:transparent url(imagentaltal.gif) top no-repeat; /*comment header background color (comment author name)*/
margin:0;
color:#000000;
float:left;
font-size:0.6875em;
line-height:17px !important;
width:465px;
}
Que estoy haciendo mal?, por que seguí también las explicaciones de Markos y no me sale, lo que si me e dado cuenta es que los códigos de mi plantilla son diferentes a los que poneis, ¿sera por la plantilla?
StudioM6
No es raro que no soporte la imagen de autor porque es una plantilla adaptada para Blogger y la parte de los CSS que corresponde a los comentarios es diferente. También podría ser porque el icono de Open ID (sistema de identificación libre) inserta un icono en la misma línea que el autor del comentario. ¿por qué no intentas añadiendo un borde y color de fondo?
Prueba también a añadirlo en .comment-body { (es el cuerpo del comentario)
y en:
#comments .blogger-comment-icon, .blogger-comment-icon {
(es el icono para la plataforma del comentarista)
El bode y color de fondo sería por ejemplo:
border:1px double#000000;
background:#ccc; es sólo para probar si puedes modificar esa parte, luego lo que podríamos intentar es añadir una imagen de fondo.
Todo es probar ;)
como bien dices en el cuerpo del mensaje (.comment-body {) si me deja poner la imagen, pero se reduce y se queda debajo de el comentario, asi que mal mal... xD
en #comments .blogger-comment-icon, tampoco parece que le afecte mucho el cambio...
No se no entiendo mucho de códigos como bien sabes xD, pero creo que le falta algo a la parte del .comment-author {, que por lo que me e dado cuenta gracias a tu explicación es que va el código como en 4 partes (la parte del nombre del Autor ".comment-author {", La parte del mensaje .comment-body {, la parte de abajo ".comment-timestamp {" donde esta la fecha del comentario y lo del icono), ya aunque no pudiese poner una imagen como teneis me gustaria saber como ponerle un borde punteado a todo el marco para separar los comentarios o un cambio de color entre comentario y comentario para diferenciarlos...
y dios! esto es la locura, ya tengo la cabeza llena de codigos y eso que no e hecho nada... jajaja
¿tu no sueñas por las noches con codigos?
NO FUNCIONO!! gema te agradeceria mucho me pudieras ayudar, mira los colores si los pude modificar y me quedo bien. lo unico que no puedo poner la imagen decorativa en la cabecera del mensaje.
el gif que nos proporciona marcos lo subi a mi flickr y saque la direccion url.
el codigo como lo deje es el siguiente:
.comment-author {
background:transparent url("http://farm4.static.flickr.com/3185/2678615443_52d2440f86_o.gif") top no-repeat; /*comment header background color (comment author name)*/
url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px; font-weight:bold;
}
MI PLANTILLA ES "son of moto"
esta es mi platilla completa: (PLIS DESCARGALA)
http://rapidshare.com/files/130566559/template-7400269549712554007_2_.xml
mucho agradecere tu apoyo y gracias por hacer estas aportaciones tan excelentes.
GRACIAS...
MI BLOG ES http://tigremen.blogspot.com por si puedes echarle una miradita y ver si se puede agregar estas imagenes decorativas. Todo lo que ve ahi se lo debo a tu blog.
Gracias!!!!
Hola.
Acabo de implementar esto, y quedó bien. Lo que no logro es poder modificar la ubicación del texto. En este casi sería "Gem@ Ha comentado..."
Me gustaría que quede un poco más arriba, hacia el centro de la imagen que coloqué. ¿Se entiende?
Muy buen post. Didáctico, como siempre.
Gracias de antemano.
Saludos
StudioM6 el borde puedes añadirlo en .comment-body { y .blog-author-comment p { así es como lo tengo yo para que diferencies bien el comentario de las visitas y el tuyo.
Siento ver esto tan tarde ;)
Tigremen en tu plantilla hiciste unos cambios que yo no se solucionar.Eliminaste el código de los comentarios de la son of moto y en su lugar añadiste los de la Minima :(
Siento no poder ayudarte :(
Andrés esa parte la puedes modificar en .comment-author { aumentando o disminuyendo según el caso en padding.
Un ejemplo:
.comment-author {
margin:.5em 0 0;
padding:13px 10px 20px 110px;
text-align: center;
Estas tres líneas hacen que quede centrado tanto de altura como de los lados.
Todo es cuestión de ir probando hasta dar con la medida ;)
}
Bueno, sigo con los problemas, yo no aprendo mas, esto ya lo hicimos en Te Propongo, pero no me sale en FolkTango, y eso que la plantilla es la Minima, no hay modo en que pueda poner la imagen de arriba en donde sale la foto o avatar del comentarista, la que va en: .comment-author {
Y tampoco puedo centrar o colocar las dos imagenes del editor, la de arriba con la de abajo en la misma linea, ya sea al centro o a la izquierda, ya ni pretenciones tengo me da igual mientras me queden las dos en el mismo sitio, pero no puedo... :( y eso que esto lo hicimos en el otro blog y vía mail también, seguí todos los pasos pero no hay caso, no puedo :'-(
Vi por allí que había que tener las entradas en expandible, pero yo no puedo hacer eso porque en esa parte del código tengo el leer mas, no puedo poner ese código, y de cualquier forma en Te Propongo tampoco lo tengo y las imagenes si salen.
Que hago gemit@@@??
No hace falta añadir las entradas en expandible k_nelita me di cuenta que no es necesario.
¿Has mirado que la imagen no sea mayor que el espacio permitido?
No gem@, no es mas grande la imagen, es mas o menos como la de Te Propongo, creo que un poco mas chica todavía, pero no se ve, está en el código de la plantilla, hasta la he puesto en dos partes diferentes y no la toma en ninguna, mira la imagen es esta: imagen
Es casi la misma que la de los títulos de los post.
Y si, me imaginaba que no era necesario dado que yo no tengo entradas en expandible en el otro blog e igual lo pude hacer, por eso no entiendo porque acá no puedo :(
Bueno muchos besos ;)
Ahh... voy a probar el Subscribe :D
hola GEM@ , cabao de añadir el codigo a mi blog y no me sale la imagen, parece que lo demas si unciona pero el fondo no, por favor ayudame , mi correo es migue.hit@gotmail.com
y mi blog es Z-Graphics
Migue es la url de la imagen lo que impide que esta salga, inténtalo añadiendo esta:
http://img218.imageshack.us/img218/9627/commentsswd3.gif
Si te resulta bien alójala en Imageshack o cualquier otro sitio por si luego dejara de funcionar mi cuenta.
Ya me dirás el resultado ;)
Hola soy TIGREMEN
http://tigremen.blogspot.com
la vez pasada te pedi me apoyaras con esto, y al fin pude el problema era que tenia que borrar el icono de blogger openID, cuando hize eso aparecio la imagen decorativa.
Solo necesito me apoyes para ubicar la imagen del autor y el texto de "dijo..".
tengo mas de 2000 visitas diarias lo voy dejar con la imagen asi con el error para que cuando te sea posible, me apoyes como componer ese error.
Ah te enlace para que mas gente hagan uso de tus valiosos aportes.
Muy agradecido por tus aportes..
Saludos
Hola Tigremen intenta modificar el padding en comment-author tienes esto:padding:30px 30px 40px 0px; yo probaría más o menos a esto:
padding:13px 12px 20px 140px;
con 13 mueves la imagen y 140 el texto puedes ir probando y modificar conforme veas el resultado.
Gracias gem@ si pude mover lo unico que no pude hacer es centrar la imagen dentro de la imagen decorativa asi como la tienes tu, lo que hize fue ponerla toda a la izquierda para evitar que se viera mal.
Gracias nuevamente por tu apoyo. :D :D :)
De nada Tigremen, en mi opnión ha quedado mejor porque al ser la imagen algo grande para el espacio quedaría muy desubicada :)
holas.. jejeje pss probe el truco.. y pss si me funciona.. pero tengo un problemita.. o no se kiza sea un problemoteeee. pero no se.. por eso te kiero preguntar jejeje..xD es k pss esa parte de ejem.. Gem@ comenta... a mi me sale al lado izquierdo.. y cuando pongo la imagen pss tambien no me sale la imagen completa solo una parte de la imagen se visualiza y psss estaba probando con una de las imagenes k tienes arriba.. y pss no se si tengo k diseñar una imagen de otro tamaño para k kede bien en mi blog o se puede modificar para k quede bien con las imagenes que tienes porque quiero hacer mi diseño pero no se de que tamaño hacerlo.. y si se puede del tamaño de los que tienes arriba...
si quieres visita mi blog en esta entrada por ejemp... http://animeseriesymanga.blogspot.com/2009/03/one-piece-391-sub-chinos.html pss me cuentas si puedes ayudarme a solucionar mis problemas... jejejeje..xD
desde ya muchaaasss Graciass..xDD
Hola Jose, la imagen para que ocupe todo el ancho de tu espacio debe tener el mismo ancho que el main de tu blog, es decir el espacio de las entradas.
Por otra parte para centrar ese texto de Gem@ dice... puedes hacerlo en:
.comment-author y añadir padding:13px 20px 18px 40px; modificando esos valores puedes ir centrando el texto ;)
Gema.. de verdad... no me gusta molestar.. y perdon si lo hago.. pero.. es k cuando le puse ese padin me centro la imagen pero el nombre del usuario.. kedo en el mismo lugar.... tengo que modificar algun otro lado..???
Gracias...xDD jejeje
No molestas por preguntar Jose, el padding lo puedes ir variando para ajustar el texto, por ejemplo si lo quieres centrar más debes aumentar el 40px a 140px.
Algo así:padding:13px 20px 18px 140px; si queda demasiado a la derecha disminuyes a menor cantidad.
La imagen debe quedar así de centrada pero más grande claro está, puedes visitar el enlace de Markos que viene en esta entrada es el chico que creó esas imágenes y las tienes en su blog de mayor tamaño ;)
jejeje..xDD
De verdad muchass gracias...
Eres muy buena..xDD
Pss ya no mas me keda hacer un Diseño.. jejeje
y pss kedara listo..
Muchas Gracias..xDD
Pues manos a la obra entonces ;)
Hola Gem@, a mi no me aparece el código de:
.comment-author {
¿Como le hago?
Nota: solo los miembros de este blog pueden publicar comentarios.